<template>
  <div>
    <input
      :class="{ err: !isValid, success: isValid }"
      :type="inputtype"
      :placeholder="iplaceholder"
      @input="inputValid"
      @blur="showToast"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      isValid: false
    };
  },
  props: ["inputtype", "iplaceholder", "rule", "errmsg"],
  methods: {
    inputValid(event) {
      // const regExp = /^.{3,10}$/;
      //动态传参
      console.log("这里是输入值验证");
      const regExp = new RegExp(this.rule); //RegExp函数是一个生成正则表达式的构造函数，生成一个对象，然后才可以调用test方法
      this.isValid = regExp.test(event.target.value);
      this.$emit("sendValue", event.target.value);
    },
    showToast() {
      if (this.isValid === false) {
        // alert(this.errmsg);
        this.$toast(this.errmsg);
      }
    }
  }
};
</script>
<style lang="less" scoped>
input {
  width: 69.444vw;
  height: 9.722vw;
  border: 1px solid #ccc;
  margin-bottom: 25px;
  background: #fff;
  outline: none;
  border-radius: 5.556vw;
  text-indent: 1em;
}
input::placeholder {
  font-size: 16px;
  color: #999;
}
.err {
  border-color: #f00;
}
</style>
